<template>
    <div>
        <el-form label-width="120px">
            <el-form-item label="经度">
                <el-input v-model.number="center.lng" disabled></el-input>
            </el-form-item>
            <el-form-item label="纬度">
                <el-input v-model.number="center.lat" disabled></el-input>
            </el-form-item>
            <el-form-item label="缩放级别">
                <el-input v-model.number="zoom"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model.number="remark"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="updateLocation">更新位置</el-button>
            </el-form-item>
        </el-form>
        <baidu-map class="map" :scroll-wheel-zoom="true" :center="center" :zoom="zoom" @moving="syncCenterAndZoom"
            @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom">
            <bm-marker :position="center" animation="BMAP_ANIMATION_BOUNCE">
                <bm-label content="我的" :labelStyle="{ color: 'red', fontSize: '24px' }"
                    :offset="{ width: -35, height: 30 }" />
            </bm-marker>
        </baidu-map>
    </div>
</template>

<script>
export default {
    mounted() {
        console.log("初始化")
        this.$axios.get('/location').then(res=>{
            const data=res.data;
            this.center.lng=data.lng;
            this.center.lat=data.lat;
            this.remark=data.remark;
        })
    },
    data() {
        return {
            form: {},
            center: {
                lng: 116.404,
                lat: 39.915
            },
            zoom: 15,
            remark: ''
        }
    },
    methods: {
        syncCenterAndZoom(e) {
            const { lng, lat } = e.target.getCenter()
            this.center.lng = lng
            this.center.lat = lat
            this.zoom = e.target.getZoom()
        },
        updateLocation() {
            this.$axios.post('/location', { remark: this.remark, lat: this.center.lat, lng: this.center.lng, userId: this.$store.getters.currentUser.id }).then(
                res => {
                    if (res.code === 200) {
                        this.$message.success("更新位置OK")
                    }
                }
            )
        }
    }
}
</script>


<style scoped>
.map {
    width: 100%;
    height: 500px;
    /* 设定一个固定高度 */
}
</style>